前言

昨天先稍微了解過Unity的UI是什麼了，今天就可以來正式應用UI到我們的遊戲之中~

如何新增血量的UI

1. 建立Background:
   首先得新增一個背景，可以在Images裡找到一個Background，將它拖曳到Scene中，
   
   再把它的Order in Layer設定成5。
   
   將Main Camera往上移動+Background調整一下，讓目前畫面變成↓
   
   可以看到畫面上方有黑黑的一塊，這邊就是我們要拿來放血量的地方，接著我們就可以利用Unity的UI系統來製作血量囉!
2. 建立文字UI(名為Life):
   首先，先在左側Hierarchy空白處右鍵點選UI→Text(命名為Life)，
   
   可以發現它預設會幫我們創立一個Canvas物件及EventSystem物件，而且剛剛新增的Text UI是被放在Canvas裡，也就代表它是Canvas的子物件。
   
   可以看到Canvas的範圍非常大，已經遠遠超出我們的遊戲視窗(Scene在圖中左下角)↓
   
   接著來調整Life物件，先把它放置到Canvas左上方，在該物件的右欄更改文字、字體、顏色等等。
   
3. 建立Image UI(血量條):
   一樣先在左側Hierarchy空白處右鍵點選UI→Image(命名為HpBar)→加上圖片(下方準備好的HpBar圖直接拖曳到Source Image)
   
   接著調整一下位子及大小，就會變成...
   
4. 建立Image UI(血量):
   同樣在左側Hierarchy空白處右鍵點選UI→Image(命名Hp)→直接把顏色改成想要的顏色→調整一下大小讓它填滿HpBar的格子。
   
   覺得大小樣式可以了之後再複製它，先把Hp拖曳到HpBar底下當作它的子物件，再來複製。
   
5. 讓血量的加減與Hp UI作連動

• 最後需要寫個函式達到血量的變化能與畫面上的HpBar血格的加減符合，意思就是Hp減1則畫面上HpBar裡的血格Hp也會減少一格。
  首先先在Player.cs裡創建一個GameObject HpBar拿來放血格，

  [SerializeField]  GameObject HpBar;
  

接著回到Unity介面，把Player的HpBar設定成HpBar物件↓

• 接著寫個函式UpdateHpBar，內容就是透過for迴圈去跑HpBar底下的子物件，也就是這些黃色的Hp血格，假設血量為3，就讓Hp、Hp[1]、Hp[2]顯示出來，其餘則隱藏(Inspector上方的勾勾取消掉)
  

void UpdateHpBar()
    {
        for(int i=0;i<HpBar.transform.childCount;i++)
        //從Hp開始跑到Hp[9]
        {
            if(Hp>i)
            {
                HpBar.transform.GetChild(i).gameObject.SetActive(true);
                //由於i是從零開始跑，所以假設血量為一的話，就要讓他顯示一格，
                就是讓HpBar底下子物件的第零個子物件顯示
            }
            else
            {
                HpBar.transform.GetChild(i).gameObject.SetActive(false);
                //SetActive(false)表不顯示
            }
        }
    }

在ModifyHp方法裡也要記得加UpdateHpBar()喔!

• 試玩~
  
  可以發現碰到Nails上方血條會減三格，碰到Normal則會加一格，與我們原本設定的吻合，而且
  就算血量超過上限或下限也不會出錯。

心得

再次讚嘆Unity內建系統的強大，讓我們只要輕鬆按滑鼠右鍵就可以新增各種物件或UI，不用再去自己特別抓東西或寫程式建立，即使如此Unity仍不斷升級更新，現今有新的元件—TextMesh Pro，這是功能更強大且讓開發者容易使用的版本，可以解決文字渲染的很多問題，大幅改進了視覺感受!

• TextMesh Pro延伸閱讀:https://docs.unity3d.com/cn/2019.4/Manual/com.unity.textmeshpro.html

• 參考網址:https://www.youtube.com/watch?v=nPW6tKeapsM&ab_channel=GrandmaCan-%E6%88%91%E9%98%BF%E5%AC%A4%E9%83%BD%E6%9C%83

• 音效、圖片 : 遊戲素材
  (素材由安德斯提供，感謝大大)